<template>
  <div>
	  <myheader></myheader>

	<section class="featured-block text-center">
		<div class="container">

      <div>
        <img :src="src">                
        <!-- //自适应 -->
        <Avatar :src='src' :width='150' fit='fill'></Avatar>
      </div>

      <table>
        <tr>
          <td>用户头像</td>
          <td>
          <input type="file" @change="upload">
          </td>

        </tr>

  
          <td>七牛</td>
          <!-- 进度条要和文件上传在一个标签里面 -->
          <td>
          <input type="file" @change="upload_qiniu">
          {{load_percent}}

          <!-- 进度条标签 -->
            <Progress v-show="load_int" :percent="load_int" color="blue">
								<span slot="text">{{ load_int }}%</span>
						</Progress>
          </td>


        <tr>
          <td>
           <video v-show="videosrc" width="300" height="200" :src="videosrc"  controls="controls" autoplay="autoplay" ></video>

          </td>
        </tr>

      <tr>
        <td>拖拽上传又拍云</td>
        <td>
        <input type="file" @change="upload_upyun">
        <div id="upload">
            拖拽上传
        </div>
        </td>
      </tr>


      </table>
			

		</div>
	</section>
	

	
	
	
	<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>
		
		
	</footer>
    
</div>
  
</template>

<script>
import {api_post01, api_get01} from"../axios_send/api.js"


//导入组件
import myheader from './myheader.vue'
import {config,formatXml} from'../config'

export default {
  data () {
    return {
      //整形进度变量
      load_int:0,
      // 上传进度暂时
      load_percent:'',
    
      src:'',
      //七牛云token
      token:'',
      //视频播放地址
      videosrc:'',



    }
  },
  components: {
    'myheader':myheader,
  },
  methods: {
    //用户信息接口
    get_userinfo(){
      let uid=localStorage.getItem("uid")
      let jwt=localStorage.getItem('jwt')

      api_get01({'uid':uid,'jwt':jwt})
      .then(a=>{
        console.log(a)
        this.src='http://localhost:8000/static/upload/'+a.img
      })

    },
    //监听用户鼠标
    onDrag(e){
  	  e.stopPropagation();
  	  e.preventDefault();
  	},

  	onDrop(e){

  		e.stopPropagation();
  		e.preventDefault();

  		//调用自定义上传方法
  		this.upload_upyun(e.dataTransfer.files);

  	},
    //又拍云拖拽上传
    upload_upyun(e){
  		//获取拖拽的文件
  		let file = e.target.files[0];

  		console.log(file);

  		//声明参数
  		let param = new FormData();
  		param.append('file',file);
      
      let config = {
        headers:{'Content-Type':'multipart/form-data'}
      }
      //发送请求
      api_post01(param,config)
      .then(res=>{
        console.log(res)
      })

    },

    get_token(){
      this.axios.get('http://127.0.0.1:8000/qiniu/')
      .then(res=>{
        // console.log(res)
        this.token = res.data.token;
        console.log(this.token)
      })

    },
    //七牛云上传
    upload_qiniu(e){
      let file = e.target.files[0]
      //声明表单参数
      let param = new FormData()
      //文件key 文件实体，文件名称
      param.append('file',file,file.name)
      param.append('token',this.token)

      //自定义axios
      const axios_qiniu = this.axios.create({
        withCredentials:false
      });
      //发送请求
      axios_qiniu({
        method:'POST',
        url :'http://up-z1.qiniu.com/',
        data:param,
        timeout:30000,
        //上传过程中的方法
        onUploadProgress:(e=>{
          //计算上传百分比
          let complete = (e.loaded / e.total)
          //处理美化
          if(complete < 1){
            this.load_percent = (complete * 100).toFixed(2)+'%'
            this.load_int = parseInt((complete * 100).toFixed(2))
            
          }
        })
      }).then(res=>{
        //手动复制100%
        this.load_percent = '100%'
        this.load_int = 100;


        console.log(res)
        //页面展示上传到牛云的图片
        this.src = 'http://q9kspg2y9.bkt.clouddn.com/'+res.data.key
        this.videosrc=config['baseurl']+res.data.key

      })

    },

    //定义提交事件
    upload(e){
      //获取文件
      let file = e.target.files[0]
      console.log(file)
      //声明表单参数
      let data = new FormData()
                //文件key 文件实体，文件名称
      data.append('file',file,file.name)
      data.append('uid',localStorage.getItem('uid'))
      //声明请求头
      let config = {headers:{'Content-Type':'multipart/form-data'}}   
      this.axios.post('http://127.0.0.1:8000/upload/',data,config)
      .then(res=>{
        console.log(res)
        console.log(e)
        this.src = 'http://127.0.0.1:8000/static/upload/'+res.data.filename

      })
    }


  },
  mounted(){
    //调用用户信息
    this.get_userinfo()
    //获取最新的token
    this.get_token()
    //注册拖拽容器
    let upload = document.querySelector('#upload')
    //声明监听事件
    upload.addEventListener('dragenter',this.onDrag,false)
    upload.addEventListener('dragover',this.onDrag,false)
    upload.addEventListener('drop',this.onDrag,false)

  }
 
}


</script>
 
<style>
/* //标签选择器 */
td{
  padding: 10px
}
.imgcode{
  cursor: pointer;
}
/* id选择器 */
#upload{
  margin: 50px;
  width: 200;
  height: 150px;
  border: 2px dashed skyblue
}


</style>